<template>
	<div class="game-container report-container addMember-container">
		<div class="line-member"></div>
		<div class="addMember-content">
			<div class="form-header">
				<span>{{ $t('merchant.add_merchant_data') }}</span>
				<span>
					<code style="color:#FF3B30;">*</code>
					{{ $t('common.add_dialog_tips') }}
				</span>
			</div>
			<el-form
				ref="form"
				label-width="100px"
				:model="form"
				:rules="rules"
				label-position="left"
			>
				<el-form-item
					:label="`${$t('merchant.merchant_name')}:`"
					prop="merchantName"
				>
					<el-input
						v-model.trim="form.merchantName"
						:disabled="loading"
						:placeholder="$t('merchant.merchant_name_placeholder')"
						autocomplete="off"
						clearable
						maxlength="20"
						show-word-limit
						size="medium"
						style="width: 365px"
					></el-input>
					<!-- <span class="span-font" @click="merchantCodeSwitchFun">
						{{
							merchantCodeSwitch ? '隐藏商户编码' : '显示商户编码'
						}}
					</span> -->
				</el-form-item>
				<el-form-item
					:label="`${$t('merchant.merchant_code')}:`"
					prop="merchantCode"
					v-show="merchantCodeSwitch"
				>
					<el-input
						v-model.trim="form.merchantCode"
						:disabled="loading"
						:placeholder="$t('merchant.merchant_code_placeholder')"
						maxlength="10"
						show-word-limit
						size="medium"
						style="width: 365px"
					></el-input>
				</el-form-item>
				<!-- 无交互 前端纯展示 -->
				<el-form-item :label="`模板样式:`" prop="templateStyle">
					<el-select
						v-model.trim="form.templateStyle"
						:disabled="loading"
						laceholder="请选择模板演示"
						size="medium"
						style="width: 365px"
					>
						<el-option value="1" label="模板一"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('merchant.merchant_level')}:`"
					prop="merchantLevelId"
				>
					<el-select
						v-model.trim="form.merchantLevelId"
						:disabled="loading"
						:placeholder="$t('merchant.merchant_level_placeholder')"
						clearable
						size="medium"
						style="width: 365px"
					>
						<el-option
							v-for="item in merchantLevelList"
							:key="item.id"
							:label="`${item.id}(${item.level})`"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					v-if="form.merchantLevelId > 0"
					:label="`${$t('merchant.merchant_up')}:`"
					prop="parentMerchantName"
				>
					<el-input
						v-model.trim="form.parentMerchantName"
						:disabled="loading"
						:placeholder="$t('common.please_enter')"
						maxlength="20"
						show-word-limit
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('merchant.merchant_wallet')}:`"
					prop="currency"
				>
					<el-select
						v-model.trim="form.currency"
						:disabled="loading"
						:placeholder="
							$t('merchant.merchant_wallet_placeholder')
						"
						size="medium"
						style="width: 365px"
					>
						<el-option
							v-for="item in currencyType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="`主钱包:`" prop="mainWallet">
					<el-select
						v-model.trim="form.mainWallet"
						:disabled="loading"
						placeholder="请选择钱包"
						size="medium"
						style="width: 365px"
					>
						<el-option
							v-for="item in currencyType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('merchant.merchant_lang')}:`"
					prop="languages"
				>
					<el-select
						v-model.trim="form.languages"
						:disabled="loading"
						:placeholder="$t('merchant.merchant_lang_placeholder')"
						multiple
						size="medium"
						style="width: 365px"
					>
						<el-option
							v-for="item in languageType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('merchant.apply_remark')}:`"
					prop="remark"
				>
					<el-input
						v-model.trim="form.remark"
						:placeholder="$t('common.please_enter')"
						maxlength="500"
						rows="8"
						show-word-limit
						type="textarea"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						:disabled="loading"
						:loading="loading"
						icon="el-icon-search"
						size="medium"
						type="primary"
						@click="addMerchant"
						@keyup.enter.native="addMerchant"
					>
						{{ $t('common.submit') }}
					</el-button>
					<el-button
						:disabled="loading"
						:loading="loading"
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { routerNames } from '@/utils/consts'
import list from '@/mixins/list'
import { addMerchantApi } from '@/api/merchant/merchant-manage/merchange-review'
import { addMerchantOptionsApi } from '@/api/merchant/merchant-manage/merchant-list'
// import Pinyin from 'js-pinyin'

export default {
	name: routerNames.addMerchant,
	mixins: [list],
	data() {
		return {
			loading: false,
			form: {
				currency: [],
				mainWalletCurrency: '',
				languages: [],
				merchantCode: undefined,
				merchantLevelId: undefined,
				merchantName: undefined,
				parentMerchantName: undefined,
				remark: undefined,
				templateStyle: undefined,
				mainWallet: undefined
			},
			merchantLevelList: [],
			mainWalletCurrency: [],
			templateType: [],
			merchantCodeSwitch: true,
			firstLetter: ''
		}
	},
	computed: {
		merchantList() {
			return this.$store.getters.merchantList || []
		},
		currencyType() {
			return this.globalDics?.currency || []
		},
		languageType() {
			return this.globalDics?.language || []
		},
		rules() {
			const merchantValidator = (rule, value, callback) => {
				if (!value) {
					callback(new Error(`${this.$t('merchant.check_length_2')}`))
				} else if (!/(?=.*[a-zA-Z])/.test(value)) {
					callback(
						new Error(`${this.$t('merchant.check_less_1_chat')}`)
					)
				} else {
					callback()
				}
			}
			const merchantPathValidator = (rule, value, callback) => {
				if (!value) {
					callback(
						new Error(
							`${this.$t('merchant.merchant_up_placeholder')}`
						)
					)
				} else {
					callback()
				}
			}
			return {
				mainWallet: [
					{ required: true, message: `请选择主钱包`, trigger: 'blur' }
				],
				templateStyle: [
					{
						required: true,
						message: `请选择模板样式`,
						trigger: 'blur'
					}
				],
				merchantName: [
					{
						required: true,
						message: `${this.$t('merchant.check_length_2')}`,
						trigger: 'blur'
					},
					{
						min: 2,
						max: 20,
						message: `${this.$t('merchant.check_length_2')}`,
						trigger: 'blur'
					}
				],
				merchantCode: [
					{
						required: true,
						validator: merchantValidator,
						trigger: 'blur'
					},
					{
						min: 2,
						max: 20,
						message: `${this.$t('merchant.check_length_2')}`,
						trigger: 'blur'
					}
				],
				parentMerchantName: [
					{
						required: true,
						validator: merchantPathValidator,
						trigger: 'blur'
					},
					{
						min: 2,
						max: 20,
						message: `${this.$t('merchant.check_length_2')}`,
						trigger: 'blur'
					}
				],

				merchantLevelId: [
					{
						required: true,
						message: `${this.$t(
							'merchant.merchant_level_placeholder'
						)}`,
						trigger: 'change'
					}
				],
				currency: [
					{
						required: true,
						message: `${this.$t(
							'merchant.merchant_wallet_placeholder'
						)}`,
						trigger: 'blur'
					}
				],
				mainWalletCurrency: [
					{
						required: true,
						message: `${this.$t(
							'merchant.merchant_main_wallet_placeholder'
						)}`,
						trigger: 'change'
					}
				],
				languages: [
					{
						required: true,
						message: `${this.$t(
							'merchant.merchant_lang_placeholder'
						)}`,
						trigger: 'change'
					}
				],
				remark: [
					{
						required: true,
						min: 2,
						max: 500,
						message: `${this.$t('merchant.check_length_2')}`,
						trigger: 'blur'
					}
				]
			}
		}
	},
	watch: {
		'form.merchantCode': {
			handler(newValue) {
				if (newValue) {
					this.form.merchantCode = newValue.replace(
						/[\u4e00-\u9fa5/\s+/]|[^a-zA-Z0-9\u4E00-\u9FA5]/g,
						''
					)
					this.form.merchantCode = this.form.merchantCode.toUpperCase()
				}
			},
			deep: true
		},
		'form.merchantName': {
			handler(newValue) {
				if (newValue) {
					if (this.form.merchantName) {
						this.form.merchantName = newValue.replace(
							/[^a-zA-Z0-9\u4E00-\u9FA5]/g,
							''
						)
						// this.convertToPinyin()
					}
				} else {
					// this.form.merchantCode = ''
				}
			},
			deep: true
		},
		'form.parentMerchantName': {
			handler(newValue) {
				if (newValue) {
					if (this.form.parentMerchantName) {
						this.form.parentMerchantName = newValue.replace(
							/[^a-zA-Z0-9\u4E00-\u9FA5]/g,
							''
						)
					}
				}
			},
			deep: true
		}
	},
	async created() {
		await this.handleMerchantList()
		// await this.getWallet()
		this.timer = setInterval(async () => {
			await this.handleMerchantList()
		}, 2000)
	},
	destroyed() {
		clearInterval(this.timer)
	},
	methods: {
		// convertToPinyin() {
		// 	if (this.form.merchantName.length > 10) return
		// 	this.form.merchantCode = ''
		// 	for (const index in this.form.merchantName) {
		// 		if (
		// 			/[\u4e00-\u9fa5]/.test(this.form.merchantName[index].trim())
		// 		) {
		// 			const pinyinString = Pinyin.getFullChars(
		// 				this.form.merchantName[index].trim()
		// 			)
		// 			this.form.merchantCode += pinyinString.substring(0, 1)
		// 		} else {
		// 			this.form.merchantCode += this.form.merchantName[index]
		// 		}
		// 	}
		// },
		merchantCodeSwitchFun() {
			this.merchantCodeSwitch = !this.merchantCodeSwitch
		},
		selectCurrency() {
			this.mainWalletCurrency = []
			if (this.form.currency.length > 0) {
				for (const item of this.form.currency) {
					this.mainWalletCurrency.push({
						code: item,
						description: item
					})
				}
			}
		},
		// 获取商户层级列表
		async handleMerchantList() {
			try {
				const res = await addMerchantOptionsApi()
				this.merchantLevelList = res.data
			} catch (e) {
				console.log(e)
			}
		},
		// 获取钱包币种
		getWallet() {
			this.loading = true
			this.$api
				.proxyArtificialPatchAccountAddAuditlockRecord()
				.then((res) => {
					if (res?.code === 200) {
						if (res.data) {
							this.form.currency = res.data
						}
						this.loading = false
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		addMerchant() {
			this.loading = true
			this.$refs['form'].validate((valid) => {
				if (valid) {
					addMerchantApi({
						currency: this.form.currency,
						languages: this.form.languages.join(','),
						merchantCode: this.form.merchantCode,
						merchantLevelId: this.form.merchantLevelId,
						merchantName: this.form.merchantName,
						parentMerchantName:
							this.form.merchantLevelId > 0
								? this.form.parentMerchantName
								: undefined,
						remark: this.form.remark
					})
						.then((res) => {
							this.$alert(
								`${this.$t('merchant.apply_no')}: ${res.data}`,
								`${this.$t('common.submit_success')}`,
								{
									confirmButtonText: `${this.$t(
										'common.confirm'
									)}`,
									callback: () => {
										this.loading = false
										this.reset()
									}
								}
							)
						})
						.catch(() => {
							this.loading = false
						})
				} else {
					this.loading = false
				}
			})
		},
		reset() {
			this.$refs['form'].resetFields()
			this.form = {
				currency: [],
				languages: [],
				mainWalletCurrency: '',
				merchantCode: undefined,
				merchantLevelId: undefined,
				merchantName: undefined,
				parentMerchantName: undefined,
				parentMerchantId: undefined,
				remark: undefined
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.span-font {
	color: cornflowerblue;
	cursor: pointer;
	margin-left: 10px;
	font-size: 12px;
}
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.addMember-container {
	background-color: #f5f5f5;
	margin: 0;
	min-height: calc(100vh - 105px);

	.line-member {
		height: 50px;
	}

	.addMember-content {
		width: 1000px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		position: relative;
		padding-top: 65px;

		.form-header {
			height: 45px;
			line-height: 45px;

			span:nth-child(1) {
				position: absolute;
				left: 30px;
				top: 0;
				color: #666;
				font-size: 14px;
				font-weight: 700;
			}

			span:nth-child(2) {
				position: absolute;
				right: 30px;
				color: #999;
				font-weight: 400;
				font-size: 14px;
				top: 0;
			}
		}
	}

	.addMember-content::after {
		position: absolute;
		top: 50px;
		content: '';
		width: 100%;
		background-color: rgba(233, 233, 233, 1);
		height: 1px;
	}
}
</style>
